<template>
  <div class="app-container">
    <el-row :gutter="20" v-loading="loading">
      <Splitpanes :horizontal="this.$store.getters.device === 'mobile'" class="default-theme">
        <Pane size="36">
          <el-col shadow="never">
            <div v-for="item in organizationInfoChangeList"  class="head-container" >
              <el-card :key="item.changeId" @click.native="handleClicks(item.changeId)"  :class="item.changeId===changeId?'check':''">
                <div >{{ item.nickName }} 提交于 {{item.createTime}}</div>
              </el-card>
            </div>
          </el-col>
        </Pane>
        <Pane size="64">
          <change-info v-if="organizationInfoChangeList.length>0" :change-id="changeId"></change-info>
        </Pane>
      </Splitpanes>
    </el-row>
  </div>
</template>

<script >
import {parseTime} from "@/utils/ruoyi";
import "splitpanes/dist/splitpanes.css"
import { Splitpanes, Pane } from "splitpanes"
import {listOrganizationInfoChange} from "@/api/system/organizationInfoChange";
import ChangeInfo from "@/views/system/platform/profile/changeInfo.vue";
export default {
  name: "OrganizationInfoChange",
  props:{
    organizationId:{
      type:String,
    },
  },
  components: {
    ChangeInfo,
    Pane,
    Splitpanes
  },
  data(){
    return{
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 企业信息变更记录表格数据
      organizationInfoChangeList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        organizationId: null,
        changeAction: null,
        operatorId: null,
        oldData: null,
        oldOther: null,
      },
      changeId:""
    }
  },
  methods: {
    parseTime,
    /** 查询企业信息变更记录列表 */
    getList() {
      this.loading = true
      listOrganizationInfoChange(this.queryParams).then(response => {
        this.organizationInfoChangeList = response.rows
        this.total = response.total
        this.loading = false
        if (response.rows.length > 0) {
          this.changeId = response.rows[0].changeId
        }
      })
    },
    handleClicks(val){
      this.changeId = val
    }
  },
  watch:{
    organizationId:{
      handler(val){
        if (val){
          this.queryParams.organizationId = val
          this.getList()
        }

      },
      immediate:true
    }
  }
}
</script>

<style scoped lang="scss">
 .head-container{
  margin-bottom: 10px;
  ::v-deep .el-card__body{
    color: #606266;
    cursor: pointer;
  }
  .check{
    background: linear-gradient(to right, #11a98345, #ffffff);
  }
}
</style>
